{extend name="public/list_page"/}

{block name="content"}
<div class="layui-card">
    <div class="layui-card-body">
        <blockquote class="layui-elem-quote">
            温馨提示：先添加角色，再为角色分配权限
        </blockquote>

        <form class="layui-form layui-col-space5" autocomplete="off">
            <div class="layui-inline layui-show-xs-block">
                <input type="text" name="keyword" id="keyword" placeholder="" class="layui-input">
            </div>
            <div class="layui-inline layui-show-xs-block">
                <button type="submit" lay-submit="" lay-filter="search" class="layui-btn layui-btn-normal search-btn"><i class="layui-icon">&#xe615;</i></button>
            </div>
        </form>

        <table class="layui-table" id="roleList" lay-filter="list"></table>
    </div>
</div>
{/block}

{block name="custom"}
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="addUser"><i class="layui-icon">&#xe654;</i>添加角色</button>
    </div>
</script>

<script type="text/html" id="isDel">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|停用" lay-filter="isDel" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="barHandle">
    <button type="button" class="layui-btn handel-btn layui-btn-primary" lay-event="edit" title="编辑"><i class="fa fa-pencil-square-o"></i></button>
    <button type="button" class="layui-btn handel-btn layui-btn-del" lay-event="del" title="删除"><i class="fa fa-trash-o"></i></button>
</script>
{/block}

{block name="js"}
<script>
    layui.use(['table','form'], function() {
        var table = layui.table;
        var form = layui.form;

        var roleTreeTb = table.render({
            elem:"#roleList",
            method:"post",
            url:"{:url('role/index')}",
            page:true,
            limits:[10,25,50,100,200,300,400,500,1000],
            toolbar:"#toolbar",//开启头部工具栏
            defaultToolbar:['filter'],
            loading:'显示加载动画',
            response:{
                statusCode:'suc'
            },
            cols:[[
                // {type:'checkbox'},
                {field:'name',title:'名称',align:'center'},
                {field:'status',title:'状态',align:'center',templet:"#isDel"},
                {field:'right',title:'操作',align:'center',width:'20%',toolbar:'#barHandle'}
            ]],
            done:function (res, curr, count) {
                $('.layui-table-cell').css({'height':'auto'})
            }
        });

        //头工具栏事件
        table.on('toolbar(list)',function (obj) {
            if (obj.event == 'addUser') {
                xadmin.open('添加角色','{:url("role/add")}',400,210)
            }
        });

        table.on('tool(list)',function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                let id = data.id
                let url = "{:url('role/edit')}?id="+id
                xadmin.open('编辑角色信息',url,600)
            }else if(obj.event == 'del'){
                var load = layer.load(1,{shade:[0.5,'#FFF']});
                layer.confirm('确认删除该角色？',{title:'',btn:['确定','取消'],cancel:function (index) {
                        layer.close(load)
                        roleTreeTb.reload()
                    }
                },function () {
                    $.ajax({
                        type:"post",
                        url:"{:url('role/del')}",
                        data:{id:data.id},
                        dataType:"JSON",
                        success:function (res) {
                            let icon = icoSuc;
                            if (res.code == 'err'){
                                icon = icoErr;
                            }
                            layer.msg(res.msg,{icon:icon,time:msgShowTime},function () {
                                layer.close(load)
                                roleTreeTb.reload()
                            })
                        },
                        error:function () {
                            layer.close(load)
                            layer.msg('系统繁忙，请重试',{time:msgShowTime});
                            roleTreeTb.reload()
                        }
                    })
                },function () {
                    layer.close(load)
                    roleTreeTb.reload()
                })
            }
        });

        form.on('switch(isDel)',function (obj) {
            let id = obj.value
            let tip = '确定启用该角色？';
            let type = 1;
            if (obj.elem.checked == false){
                tip = '确定停用该角色？';
                type = 2;
            }
            layer.confirm(tip,{btn:['确定','取消'],cancel:function () {
                    roleTreeTb.reload();
                }
            },function () {
                var load = layer.load(1,{shade:[0.5,'#FFF']});
                $.ajax({
                    type:"POST",
                    url:"{:url('role/changeStatus')}",
                    data:{
                        id:id,
                        type:type
                    },
                    dataType:"JSON",
                    success:function (res) {
                        let icon = icoSuc;
                        if (res.code == 'err') {
                            icon = icoErr;
                        }
                        layer.msg(res.msg,{icon:icon,time:msgShowTime})
                    }

                })
                layer.close(load);
                roleTreeTb.reload();
            },function () {
                roleTreeTb.reload();
            })
        });

        //监听提交
        form.on('submit(search)',function (data) {
            //重载表格
            roleTreeTb.reload({
                where:{
                    keyword:data.field.keyword
                },
                page:{
                    curr:1
                }
            });
            return false
        });
    });

</script>
{/block}